<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";

%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <script src="ECharts/echarts.min.js"></script>
    <script src="jquery/jquery-1.11.1-min.js"></script>
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <script>

        $(function () {

            //页面加载完毕后，绘制统计图表
            getCharts();

        })

        function getCharts() {

            $.ajax({
                url : "workbench/customer/getCharts.do",
                type : "get",
                dataType : "json",
                success : function(data) {

                    var myChart = echarts.init(document.getElementById('main'));

                    //我们要画的图
                    var option = {

                        title : {
                            text : '客户级别及联系人和客户关系柱形图'
                        },
                        tooltip: {},
                        legend: {
                            data:['数量']
                        },
                        xAxis: {
                            data: data.dataList
                        },
                        yAxis: {
                            type: 'value',
                            min:0,
                            minInterval:1
                        },
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: data.total
                        }]
                    };

                    myChart.setOption(option);

                    myChart.on('click', function (params) {

                        showCustomer(params.name);

                    })

                }
            })

        }

        function showCustomer(priority) {
            //"workbench/contacts/getContactsByCustomerName.do",
            $.ajax({
                url : "workbench/customer/getCustomerByPriority.do",
                data : {
                    "priority" : priority
                },
                type : "get",
                dataType : "json",
                success : function(data) {

                    var html = "";

                    $.each(data,function (i,n) {

                        html += '<tr>';
                        html += '<td><a style="text-decoration: none; cursor: pointer;" href="javascript:void(0);" onclick="showContacts(\'' + n.name  + '\')">'+n.name+'</a></td>';
                        html += '<td>'+n.owner+'</td>';
                        html += '<td>'+n.phone+'</td>';
                        html += '<td>'+n.website+'</td>';
                        html += '</tr>';

                    })

                    $("#customerSearchBody").html(html);

                    $("#customerModal").modal("show");

                }
            })


        }

        function showContacts(name) {
            //"workbench/contacts/getContactsByCustomerName.do",
            $.ajax({
                url : "workbench/contacts/getContactsByCustomerName.do",
                data : {
                    "customerName" : name
                },
                type : "get",
                dataType : "json",
                success : function(data) {

                    var html = "";

                    $.each(data,function (i,n) {

                        html += '<tr>';
                        html += '<td>'+n.fullname+n.appellation+'</td>';
                        html += '<td>'+n.owner+'</td>';
                        html += '<td>'+n.customerId+'</td>';
                        html += '<td>'+n.job+'</td>';
                        html += '<td>'+n.source+'</td>';
                        html += '<td>'+n.mphone+'</td>';
                        html += '<td>'+n.email+'</td>';
                        html += '</tr>';

                    })

                    $("#contactsSearchBody").html(html);

                    $("#customerModal").modal("hide");

                    $("#contactsModal").modal("show");

                }
            })


        }

    </script>
</head>
<body>

    <!-- 查看联系人的模态窗口 -->
    <div class="modal fade" id="contactsModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">联系人</h4>
                </div>
                <div class="modal-body">
                    <table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
                        <thead>
                        <tr style="color: #B3B3B3;">
                            <%--<td><input type="checkbox" id="qx"/></td>--%>
                            <td>联系人名称</td>
                            <td>所有者</td>
                            <td>客户</td>
                            <td>职位</td>
                            <td>来源</td>
                            <td>手机</td>
                            <td>邮箱</td>
                            <td></td>
                        </tr>
                        </thead>
                        <tbody id="contactsSearchBody">

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <!-- 查看客户的模态窗口 -->
    <div class="modal fade" id="customerModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">客户</h4>
                </div>
                <div class="modal-body">
                    <table id="activityTable2" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
                        <thead>
                        <tr style="color: #B3B3B3;">
                            <td>客户名称</td>
                            <td>所有者</td>
                            <td>公司座机</td>
                            <td>公司网站</td>
                            <td></td>
                        </tr>
                        </thead>
                        <tbody id="customerSearchBody">

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1000px;height:400px;"></div>

</body>
</html>



























































